News Scrolling

  • in html

    1. css 

    
                      <style type="text/css">
		
                      .scroll5,
                      .scroll6 {
                        display: none;
                      }

                      
                    </style>

    2. add js 

    
                    <script src="https://blog.manvia.in/public/js/infiniteslidev2.js"></script>

    3. html code

    

                    <div class="col-lg-3 about-right" style="max-height:300px;overflow:hidden">
                          <div class="scroll5">

                                  <div class="scroll_item">
                                          <div class="col-12 ab-right-box">
                                            hai
                                          </div>
                                  </div>


                          </div>

                    </div>

    4. add script

    
                    <script type="text/javascript">
                      $(function () {
                          $('.scroll5').infiniteslide({
                          speed: 25,
                          direction: 'up'
                        });
                      });
                    </script>

  • Different Directions 

    
                   direction: 'up'
                   direction: 'down'
                   direction: 'left'
                   direction: 'right'

    • Preloader

    in style

    
                  
                   #loaderContainer {
      background-color: rgba(255, 255, 255, 0.95); /* adjust the 0.95 for transparency */
      left: 0;
      
      top: 0;
      width: 100%;
 }
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #213130;
  width: 120px;
  height: 120px;
  margin: 20% auto 0; /* Adjust the 20% to move the loader up or down. */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes  spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

    in html

    
                       <div id="loaderContainer">
                            <div class="loader"></div>
                        </div>
                        <div class="marquees scroll5" style="display:none;">
                        </div>

    in js 

    
                    $(window).on('load', function() {
                        window.loaded = true;
                        $('#loaderContainer').hide();
                    });